<template>
    <div class='shop-detail'>
        <img :src="shop.img" alt="">
		<p>{{shop.name}}</p>
		<p>
			{{shop.price}}
		</p>
		<div class="change-price">
			<button v-if="bool" @click="bool=false">修改价格</button>
			<div v-else>
				<input type="text" v-model.number="price">
				<button @click="changePrice">确认</button>
				<button @click="bool=true">取消</button>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
        name: 'shop-detail-page',
		props:{
			shop:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		inject:['changeP'],
        data() {
            return {
				bool:true,
				price:undefined,
            }
        },
		methods: {
			changePrice() {
				if(this.price){
					this.changeP(this.price,this.shop.id)
					this.price = null
					this.bool = true
				}else{
					alert('请输入价格')
				}
			}
		},
    }
</script>

<style scoped>
	.shop-detail{
		width: 200px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
	}
	.shop-detail img{
		width: 200px;
		height: 200px;
		object-fit: cover;
	}
</style>